<template>
  <div class="member-container">
    <BasicTable @register="registerTable" class="table-container">
      <template #headerTop>
        <Tabs v-model:activeKey="activeKey" @change="handleChange">
          <TabPane v-for="item in tableConfig" :key="item.key" :tab="item.title"></TabPane>
        </Tabs>
      </template>
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'userName'">
          <div v-if="record.userName" class="image-text">
            <Avatar :src="record.userAvatar" />
            <div class="text">
              <span>{{ record.userName }}</span>
              <span>{{ record.userPhone }}</span>
            </div>
          </div>
        </template>
        <template v-else-if="column.key === 'inviteUserName'">
          <div v-if="record.userName" class="image-text">
            <Avatar :src="record.inviteUserAvatar" />
            <div class="text">
              <span>{{ record.inviteUserName }}</span>
              <span>{{ record.inviteUserPhone }}</span>
            </div>
          </div>
        </template>
      </template>
    </BasicTable>
  </div>
</template>
<script lang="ts" setup>
import { BasicTable, useTable } from '@/components/Table';
import { getBasicColumns, getSaasColumns } from './tableData';
import { getIntendedMember, getSassIntention,getFuaiqiIntended } from '@/api/hby/intendedMembers/index';
import { Avatar, Tabs, TabPane } from 'ant-design-vue';
import { ref } from 'vue';

enum TableTypeEnum {
  SAAS,
  HBY,
  FIQ
}

const tableConfig = [
  {
    key: TableTypeEnum.SAAS,
    title: 'SAAS合作邀约',
    tableColumns: () => setColumns(getSaasColumns()),
    api: (par) => getSassIntention(par)
  },
  {
    key: TableTypeEnum.HBY,
    title: '会邦云信息收集',
    tableColumns: () => setColumns(getBasicColumns()),
    api: (par) => getIntendedMember(par)
  },
  {
    key: TableTypeEnum.FIQ,
    title: '福i企收集',
    tableColumns: () => setColumns(getBasicColumns()),
    api: (par) => getFuaiqiIntended(par)
  }
];

const activeKey = ref(TableTypeEnum.SAAS);

const handleChange = () => {
  tableConfig.find(item => item.key == activeKey.value)!.tableColumns();
  reload();
}


const [registerTable, { reload, setColumns }] = useTable({
  api: (par) => {
    return tableConfig.find(item => item.key == activeKey.value)!.api(par);
  },
  columns: getSaasColumns(),
  showIndexColumn: true,
  clickToRowSelect: false,
  useSearchForm: true,
  showTableSetting: true,
  tableSetting: { fullScreen: true },
  formConfig: {
    labelWidth: 100,
    schemas: [
      {
        field: `keyWord`,
        label: `关键词`,
        component: 'Input',
        colProps: {
          span: 6,
        },
      },
      {
        field: `[startTime, endTime]`,
        label: `创建时间`,
        component: 'RangePicker',
        componentProps: {
          format: 'YYYY-MM-DD',
          placeholder: ['开始时间', '结束时间'],

        },
        colProps: {
          span: 8,
        },
      },
    ],
  },
});



</script>

<style lang="less" scoped>
.member-container {

  ::v-deep .ant-table-title {
    &>div {
      display: flex;
      justify-content: space-between;
    }
  }


  .image-text {
    display: flex;
    align-items: center;
    gap: 16px;

    .text {
      flex: 1;
      text-align: left;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
}
</style>